@extends('admin.layout.layout', ['row' => @$page])

@section('contain')
    <style>
        .chart-wrapper{
            height: 600px;
            width: 100%;
            padding-top: 20px;
        }
    </style>
    <div class="portlet">
        <div class="portlet-title">
            <div class="caption">
                <x-portlet-breadcrumb :page="$page"></x-portlet-breadcrumb>
            </div>
            <div class="actions">
            </div>
        </div>

        <div class="filter-wrapper">
            <form action="/{{ request()->path() }}/" class="form-inline filter-form">
                <div class="col"></div>
                <div class="input-group mb-3 custom-control-inline">
                    <select name="year" class="form-control" style="width: 180px;" onchange="changeChartsYear(this)">
                        @foreach(range(date('Y'), 2000) as $k => $v)
                            <option value="{{ $v }}" {{ request()->input('year') == $v ? 'selected' : '' }}>{{ $v }}</option>
                        @endforeach
                    </select>
                </div>
            </form>
        </div>

        <div class="container-fluid">
            <div class="chart-wrapper" id="chart1"></div>
            <div>
                <h2>详情</h2>
                <table class="table table-s2" style="width: 640px;max-width: 100%;">
                    <thead>
                    <tr>
                        <th>{{ ts('jxsmc') }}</th>
                        <th>{{ ts('CPXL') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($table['t1'] as $k => $v)
                    <tr>
                        <td>{{ $k }}</td>
                        <td>{{ $v }} cm</td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>


@endsection

@section('script')
    <script>


        /*
        * axisPointer: line, shadow*/
        function eLinesCharts(ele, title, legend, xAxis, series, axisPointer='line') {
            var c1 = echarts.init(document.getElementById(ele), 'macarons')
            option = {
                title: {
                    text: title,
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 500
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: axisPointer
                    }
                },
                legend: {
                    data: legend,
                    y: 'bottom',

                },
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xAxis,
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };

            c1.setOption(option)
        }
        function myPie(ele, title, legend, series) {
            var c1 = echarts.init(document.getElementById(ele), 'macarons')
            option = {
                title: {
                    text: title,
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 500
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    data: legend,
                },
                series: [
                    {
                        name: title,
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: series,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var rand = "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);
                                    var colorList = ['#1891ff','#f9cc14','#13c2c2','#2fc25b'];
                                    return colorList[params.dataIndex] || rand;
                                }
                            }
                        }
                    }
                ]
            };
            c1.setOption(option)
        }

        function myChart6(ele, title, legend, xAxis, series, axisPointer='line') {
            var c1 = echarts.init(document.getElementById(ele), 'macarons')
            option = {
                title: {
                    text: title,
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 500
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: axisPointer
                    }
                },
                legend: {
                    data: legend,
                    y: 'bottom',

                },
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xAxis,
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };

            c1.setOption(option)
        }
        function BarYCategory(ele, title, yAxis, series, axisPointer='line') {
            var c1 = echarts.init(document.getElementById(ele), 'macarons')
            option = {
                title: {
                    text: title,
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 500
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: axisPointer
                    }
                },
                /*legend: {
                    data: legend,
                    // y: 'bottom',
                },*/
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    // data: xAxis,
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: yAxis,
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                series: [
                    {
                        type: 'bar',
                        data: series,
                    }
                ]
            };
            c1.setOption(option)
        }
        function c1() {
            var json = @json($charts['c1']);
            BarYCategory('chart1', json['title'], aSlice(json['yAxis']), aSlice(json['series']))
            console.log(json)
        }
        c1();

        function aSlice(arr) {
            if (arr.length >= 12) {
                return arr.slice(0,12)
            }
            return arr;
        }

        function changeChartsYear(ele) {
            var a = Qs.parse(location.search.replace('?', ''))
            a.year = $(ele).val()
            url = location.pathname + '?' + Qs.stringify(a)+location.hash;
            location.assign(url);
        }
    </script>

@endsection